<form class="layui-form" action="">

    <div class="layui-form-item">
        <label class="layui-form-label">拜年对象</label>
        <div class="layui-input-inline">
            <select name="city" class="select_person">
                <?php if(!empty($select_person)){
                    foreach ($select_person as $kk=>$vv){

                        ?>
                        <option value="<?=$vv['id']?>"><?=$vv['name']?></option>
                    <?php }} ?>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">祝福语</label>
        <div class="layui-input-inline">
            <select name="city" class="select_host">
                <?php if(!empty($host)){
                    foreach ($host as $k=>$v){

                        ?>
                        <option value="<?=$v['id']?>"><?=$v['name']?></option>
                    <?php }} ?>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width:120px;">添加视频</label>
        <div class="layui-input-block">
            <button type="button" class="layui-btn" id="test1"><i class="layui-icon"></i>上传视频</button>
            <input type="text" name="" class="wenzi1" style="width:300px;height:35px;margin-left:20px;display:none;">
            <span class="up1" style="width:300px;height:35px;margin-left:20px;display:none;color:red;"></span>
            <input type="hidden" name="video_url" class="video_url_url">
        </div>
    </div>
    <div style="width: 400px;height: 200px;border: 1px solid lightgreen;margin-left: 150px;float: left;margin-bottom:15px;">
        <video src="" style="width: 400px;height: 200px;" class="video_url_http" controls>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width:120px;">添加大屏封面</label>
        <div class="layui-input-block">
            <button type="button" class="layui-btn" id="test4"><i class="layui-icon"></i>上传大屏封面</button>
            <input type="text" name="" class="wenzi4" style="width:300px;height:35px;margin-left:20px;display:none;">
            <span class="up4" style="width:300px;height:35px;margin-left:20px;display:none;color:red;"></span>
            <input type="hidden" name="video_url" class="big_pic_url">
        </div>
    </div>
    <div style="width: 100px;height: 100px;border: 1px solid lightgreen;margin-left: 150px;float: left;margin-bottom:15px;">
        <img src="" style="width: 100px;height: 100px;" class="big_pic_http">
    </div>
    <span style="margin-left: 10px;color: gainsboro;">建议尺寸528*296，必填</span>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width:120px;">添加封面</label>
        <div class="layui-input-block">
            <button type="button" class="layui-btn" id="test2"><i class="layui-icon"></i>上传封面</button>
            <input type="text" name="" class="wenzi2" style="width:300px;height:35px;margin-left:20px;display:none;">
            <span class="up2" style="width:300px;height:35px;margin-left:20px;display:none;color:red;"></span>
            <input type="hidden" name="video_url" class="pic_url">
        </div>
    </div>
    <div style="width: 100px;height: 100px;border: 1px solid lightgreen;margin-left: 150px;float: left;margin-bottom:15px;">
        <img src="" style="width: 100px;height: 100px;" class="pic_http">
    </div>
    <span style="margin-left: 10px;color: gainsboro;">建议尺寸240x360，必填</span>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width:120px;">添加分享封面</label>
        <div class="layui-input-block">
            <button type="button" class="layui-btn" id="test3"><i class="layui-icon"></i>上传分享封面</button>
            <input type="text" name="" class="wenzi3" style="width:300px;height:35px;margin-left:20px;display:none;">
            <span class="up3" style="width:300px;height:35px;margin-left:20px;display:none;color:red;"></span>
            <input type="hidden" name="video_url" class="share_pic_url">
        </div>
    </div>
    <div style="width: 100px;height: 100px;border: 1px solid lightgreen;margin-left: 150px;float: left;;margin-bottom:15px;">
        <img src="" style="width: 100px;height: 100px;" class="share_pic_http">
    </div>
    <span style="margin-left: 10px;color: gainsboro;">建议尺寸210x168，必填</span>

    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">祝福语</label>
        <div class="layui-input-inline" style="width:450px;">
            <textarea name="desc" placeholder="请输入祝福语" class="layui-textarea title"></textarea>
        </div>
        <span style="margin-left: 10px;color: gainsboro;">最多30字</span>
    </div>
    <br><br>
    <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <button type="button" class="layui-btn save">保存</button>
        <button type="button" class="layui-btn back">取消</button>
    </div>

</form>

<script>
    //保存
    $(".save").click(function () {
        var select_host=$('.select_host').val();
        var select_person=$('.select_person').val();
        var video_url_url=$('.video_url_url').val();
        var pic_url=$('.pic_url').val();
        var share_pic_url=$('.share_pic_url').val();
        var wangchun_big_pic=$('.big_pic_url').val();
        var title=$('.title').val();
//        var a=[select_host,select_person,video_url_url,pic_url,share_pic_url,title];
//        console.log(a)
        $.ajax({
            type: "post",
            data: {select_host:select_host,select_person:select_person,video_url_url:video_url_url,pic_url:pic_url,share_pic_url:share_pic_url,title:title,wangchun_big_pic:wangchun_big_pic},
            dataType: "json",
            url: "<?=base_url("activity/wangchun/save_add_wangchun")?>",
            success: function (res) {
                if(res.code==0){
                    layer.msg(res.msg,{time:1000},function(){
                        window.location.href=res.data
                    })
                }else{
                    layer.msg(res.msg, {time: 2000});
                }
            }
        })
    })

    $(function(){
        //上传视频和音频接口
        layui.use('upload', function() {
            var $ = layui.jquery
                , upload = layui.upload;
            //上传完整视频
            upload.render({
                elem: '#test1'
                , url: "<?=base_url("common/upload/normal_upload")?>"
                , data: {type: "video"}
                ,size:"51200"
                ,accept:'video'
                ,acceptMime: 'video/mp4,video/mov,video/avi'
                , before: function () {
                    $(".up1").text("上传中。。。请等待");
                    $(".up1").show()
                }
                , done: function (res) {
                    if (res.code == 0) {
                        $('.up1').text("上传成功");
                        $('.video_url_url').val(res.data.file_url);
                        $('.video_url_http').attr("src",res.data.file_url)
                        layer.msg(res.msg, {time: 2000});
                    }
                    if (res.code == 1) {
                        layer.msg(res.msg, {time: 2000});
                    }
                }
            })

            //上传大屏封面
            upload.render({
                elem: '#test4'
                , url: "<?=base_url("common/upload/normal_upload")?>"
                , data: {type: "image"}
                ,acceptMime: 'image/*'
                , before: function () {
                    $(".up4").text("上传中。。。请等待");
                    $(".up4").show()
                }
                , done: function (res) {
                    if (res.code == 0) {
                        $('.up4').text("上传成功");
                        $('.big_pic_url').val(res.data.file_url);
                        $('.big_pic_http').attr("src",res.data.file_url);
                        layer.msg(res.msg, {time: 2000});
                    }
                    if (res.code == 1) {
                        layer.msg(res.msg, {time: 2000});
                    }
                }
            })

            //上传封面
            upload.render({
                elem: '#test2'
                , url: "<?=base_url("common/upload/normal_upload")?>"
                , data: {type: "image"}
                ,acceptMime: 'image/*'
                , before: function () {
                    $(".up2").text("上传中。。。请等待");
                    $(".up2").show()
                }
                , done: function (res) {
                    if (res.code == 0) {
                        $('.up2').text("上传成功");
                        $('.pic_url').val(res.data.file_url);
                        $('.pic_http').attr("src",res.data.file_url);
                        layer.msg(res.msg, {time: 2000});
                    }
                    if (res.code == 1) {
                        layer.msg(res.msg, {time: 2000});
                    }
                }
            })

            //上传分享封面
            upload.render({
                elem: '#test3'
                , url: "<?=base_url("common/upload/normal_upload")?>"
                , data: {type: "image"}
                ,acceptMime: 'image/*'
                , before: function () {
                    $(".up3").text("上传中。。。请等待");
                    $(".up3").show()
                }
                , done: function (res) {
                    if (res.code == 0) {
                        $('.up3').text("上传成功");
                        $('.share_pic_url').val(res.data.file_url);
                        $('.share_pic_http').attr("src",res.data.file_url);
                        layer.msg(res.msg, {time: 2000});
                    }
                    if (res.code == 1) {
                        layer.msg(res.msg, {time: 2000});
                    }
                }
            })
        })
    })
    //返回
    $('.back').click(function(){
        window.history.back(-1);
    })
</script>